<template>
  <div>
    <div>
      <a-row type="flex" justify="space-between" align="middle">
        <div class="">
          <a-input
            class="search-input"
            v-model="model.queryIp"
            placeholder="软件名称"
            allow-clear
            style="width: 190px"
          />
          <a-button
            type="primary"
            @click="
              current = 1;
              search();
            "
            >查询
          </a-button>
        </div>
      </a-row>
    </div>
    <a-table
      :columns="columns"
      :data-source="data"
      size="small"
      :pagination="false"
      :loading="loading"
      style="margin-top: 10px"
      rowKey="index"
    >
      <template slot="action">
        <span class="button-text">扫描</span>
      </template>
    </a-table>
    <Pagination
      :total="total"
      :defaultPage="page"
      :defaultCurrent="current"
      @sizeChange="
        (val) => {
          page = val;
          current = 1;
          search();
        }
      "
      @currentChange="currentChange"
    />
  </div>
</template>

<script>
const columns = [
  {
    title: "编号",
    key: "index",
    dataIndex: "index",
    width: 60,
  },
  {
    title: "软件名称",
    key: "softwareName",
    dataIndex: "softwareName",
  },

  {
    title: "漏洞",
    key: "vulnerability",
    dataIndex: "vulnerability",
    ellipsis: true,
  },

  {
    title: "操作",
    key: "action",
    width: 60,
    scopedSlots: { customRender: "action" },
  },
];
import Pagination from "@/components/Pagination.vue";
import { mockVuln } from "@/config/safe/data/vuln";

export default {
  components: {
    Pagination,
  },
  data() {
    return {
      columns,
      loading: false,
      data: mockVuln,
      page: 10,
      current: 1,
      total: 4,
      model: {
        queryIp: "",
      },
      visible: false,
    };
  },
  methods: {
    currentChange(val) {
      this.current = val;
      this.search();
    },
  },
};
</script>
